<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    li:hover{
        background-color: rgb(255, 255, 255);
    }
</style>
<body>
    <div style="width: 70%;margin-left: 20%;" class="container">
        <strong align="center">
            <span style="color: red;">备忘录:今天</span>
            <span style="color: blue;"  class="today"></span>
            <button onclick="showInputForm()" id="submit">添加备忘录</button>
        </strong>
    </div>
    <form style="display: none;" name="inputform" class="container" method="get">
        日期:<input name="dateinput" type="date" > <br>
        备忘录:<input type="text" id="zcinput" placeholder="请输入备忘录信息"><br>
        重要性:<input name="import" type="radio" value="重要" checked="checked">
        <label>重要</label>
        <input name="import" type="radio" value="普通">
        <label>普通</label>
        <br>
        <input name="finish" type="radio" value="已完成"> <label>已完成</label>
        <input name="finish" type="radio" value="未完成" checked="checked" > <label>未完成</label>
        <div>
            <input type="button" id="tijiao" onclick="addMemo()" value="确定">
            <input type="button" onclick="resetInput()" value="重置">
        </div>
    </form>
    <ul id="list1"> </ul>
    <script>
        document.inputform.dateinput.value=getCurrentDate();
        function saveStorage(json1){
            var item = sessionStorage.getItem('desc');
            var date=[];
            if((item==undefined)||(item==null)) date=[];
            else date=JSON.parse(item);
            date.push(json1);
            sessionStorage.setItem("desc",JSON.stringify(date));
        }
        function restore(){
            var ul=document.getElementById('list1');
            var date=sessionStorage.getItem("desc");
            if(date==undefined||date==null) return;
            var items=JSON.parse(date);
            for(let i=0;i<items.length;i++){
                if(items[i]==null||items[i]=="") continue;
                var li=document.createElement('li');
                li.innerHTML=items[i].date+' '+items[i].desc+' '+items[i].important+' '+items[i].finish;
                if(items[i].finish=='已完成') li.style.color="rgb(200,200,200)";
                else li.style.color="red";
                ul.appendChild(li);
            }
        }
        var today=new Date();
        var week=today.getDay();
        var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
        document.getElementsByClassName("today")[0].innerHTML=weekday[week];
        var bot=document.getElementById("tijiao");
        var lis=document.getElementById("list1");
        var inpu=document.getElementById("zcinput");
        var myBtn=document.inputform.dateinput;
        var clickNum=0;
        function myBtnClick(){
            clickNum++;
            myBtn.value=clickNum;
        }
        myBtn.addEventListener("click",myBtnClick);
        function addMemo(){
            var myjson={}
            myjson.date=getriqi();
            myjson.desc=inpu.value;
            myjson.important=document.inputform.import.value;
            myjson.finish=document.inputform.finish.value;
            var today=getriqi();
            var datestr=today+' '+inpu.value+' '+document.inputform.import.value+' '+document.inputform.finish.value;
            var li=document.createElement("li");
            li.textContent=datestr;
            if(document.inputform.finish.value=="已完成") li.style.color="rgb(200,200,200)";
            else li.style.color="red";
            lis.appendChild(li);
            inpu.value=" ";
            showInputForm();
            saveStorage(myjson);
            changelist();
            resetInput();
        }
        function showInputForm(){
            var form=document.inputform;
            if(form.style.display=="none"){
                form.style.display="block";
            }
            else form.style.display="none";
        }
        function resetInput(){
            document.inputform.dateinput.value=getCurrentDate();
            document.getElementById("zcinput").value="";
        }
        function getCurrentDate(){
            var today = new Date();
            var dd = String(today.getDate()).padStart(2, '0');
            var mm = String(today.getMonth() + 1).padStart(2, '0');
            var yyyy = today.getFullYear();
            return yyyy+'-'+mm+'-'+dd;
        }
        function getriqi(){
            var today= document.inputform.dateinput.value;
            var yyyy=today.substring(0,4);
            var mm=today.substring(5,7);
            var dd=today.substring(8,10);
            return yyyy+'-'+mm+'-'+dd;
        }
        restore();
        function changelist(){
            var lis=document.getElementById('list1');
            var child_for_lis=lis.getElementsByTagName('li');
            for(var i=0;i<child_for_lis.length;i++){
                child_for_lis[i].addEventListener("click",function(){
                    var str=this.innerHTML;
                    var item = sessionStorage.getItem('desc');
                    var date=[];
                    if((item==undefined)||(item==null)) date=[];
                    else date=JSON.parse(item);
                    var json2={
                        date:str.substring(0,10),
                        desc:str.substring(11,str.length-7),
                        important:str.substring(str.length-6,str.length-4),
                        finish:str.substring(str.length-3,str.length)
                    }
                    for(var j=0;j<date.length;j++){
                        var t1= JSON.stringify(date[j]);
                        var t2= JSON.stringify(json2);
                        if(t1==t2){
                            date[j].finish='已完成';
                            sessionStorage.setItem("desc",JSON.stringify(date));
                        }
                    }
                        if(str.substring(str.length-3,str.length)=='未完成'){
                            this.style.color="rgb(200,200,200)";
                            this.innerHTML=str.substring(0,str.length-3)+'已完成';
                        }
                    })
        }
        }
        changelist();
    </script>
</body>
</html>